<template>
    <div id="user-area" class="user-erea float-left">
        <div class="user-icon"></div>
        <div class="user-info">
            <p class="username">{{ user.name }}</p>
            <p>{{ user.sentence }}</p>
            <p><b class="fa fa-map-marker"></b> {{ user.address }}</p>
        </div>
        <div class="user-article-info d-flex justify-content-between">
            <div class="user-article-nums float-left">
                <p>文章</p>
                <p class="user-article-info-nums">119</p>
            </div>
            <div class="user-article-type-nums float-left">
                <p>分类</p>
                <p class="user-article-info-nums">45</p>
            </div>
            <div class="user-article-label-nums float-left">
                <p>标签</p>
                <p class="user-article-info-nums">69</p>
            </div>
        </div>
        <button class="btn btn-block btn-primary rounded-pill mx-auto">
            关注我
        </button>
        <div class="user-others d-flex justify-content-between mx-auto">
            <b class="fa fa-github"></b>
            <b class="fa fa-weibo"></b>
            <b class="fa fa-envelope"></b>
            <b class="fa fa-qq"></b>
            <b class="fa fa-weixin"></b>
        </div>
    </div>
</template>

<script>
export default {
    name: "user-area",
    data() {
        return {
            user: {
                name: "释迦摩尼",
                sentence: "阿弥陀佛,哈利路亚",
                address: "your heart",
            },
        };
    },
};
</script>

<style lang="scss" scoped>
.user-erea {
    word-spacing: 0.1em;
    background-color: #fff;
    width: 22%;
    // height: 1000px;
    margin-right: 1.5%;
    padding-bottom: 2em;
    p {
        margin: 0;
        font-size: 13px;
    }
    .user-icon {
        margin: 1.2em auto;
        margin-bottom: 0.5em;
        width: 6rem;
        height: 6rem;
        border-radius: 6rem;
        background-image: url("../../../assets/images/userImg.jpg");
        background-size: 100%;
    }
    .user-info {
        width: 10em;
        margin: 0 auto;
        text-align: center;
        .username {
            letter-spacing: 0.1em;
            font-size: 20px;
            margin-bottom: 0.15em;
        }
    }
    .user-article-info {
        width: 85%;
        margin: 0.3rem auto;
        div {
            text-align: center;
            margin: 0px 15px;
        }
        .user-article-info-nums {
            font-size: 25px;
            font-weight: bold;
        }
    }
    button {
        width: 90%;
        padding: 0.2em;
    }
    .user-others {
        width: 80%;
        margin-top: 1rem;
        font-size: 15px;
        color: #4b4a4a;
    }
}
</style>